<template>
  <div class="page-wrapper">
    <div class="content">
      <el-col :span="4" style="text-align: center;height: 50px">
        <span style="margin-top: 20px;font-size: 25px;font-family: 幼圆">已发布实验</span>
      </el-col>
      <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          border>
        <el-table-column prop="num" label="实验号"></el-table-column>
        <el-table-column prop="name" label="实验名"></el-table-column>
        <el-table-column prop="status" label="实验状态"></el-table-column>
        <el-table-column prop="starttime" label="开始时间"></el-table-column>
        <el-table-column prop="endtime" label="结束时间"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-dropdown>
              <el-button type="success">
                实验操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="EndHomework(scope.row)">截止实验</el-dropdown-item>
                  <router-link to="/Teacher/HomeworkCharts"><el-dropdown-item>查看完成情况</el-dropdown-item></router-link>
                  <el-dropdown-item @click="Detail(scope.row)">批改实验</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          layout="prev, pager, next"
          :total="this.total"
          :page-size="this.page.pageSize">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { ArrowDown } from '@element-plus/icons-vue'
import axios from "axios";
export default {
  name:'EnterHomework',
  components:{
    ArrowDown
  },
  methods: {
    load(){
      axios.post('/api/task/GetPublishedTask',this.page).then(res=>{
        console.log(res);
        this.total =  res.data.data.total
        this.tableData = res.data.data.list
        for (let i = 0; i < this.tableData.length; i++) {
          if(this.tableData[i].status === 1 ){
            this.tableData[i].status = '已发放'
          }
          else {
            this.tableData[i].status = '已截止'
          }
        }
      }).catch(error=>{
        console.log(error);
      })
    },
    tableRowClassName({row, rowIndex}) {
      console.log(row.status);
      if (row.status === '已截止') {
        return 'warning-row';
      } else if (row.status === '已发放') {
        return 'success-row';
      }
      return '';
    },
    Detail(scope){
      console.log(scope);
      this.$router.push({name:'ViewHwDetail',params:{TaskNum:scope.num}});
    },
    EndHomework(scope){
      axios.get('/api/task/EndTask',{params:{taskNum:scope.num}}).then(res=>{
        this.$message.success("删除成功")
        this.load()
      }).catch(error=>{

      })
    }
  },
  data() {
    return {
      tableData: [],
      page:{pageNum:1,pageSize:10,query:1},
      total:undefined
    }
  },
  created() {
    this.load()
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-table-column{
  width: 10%;
}

.el-pagination{
  text-align:center;
  margin-top:50px;
  margin-left: 35%;
}
</style>